<template>
    <view class="license-plate-keyboard">
        <view class="keyboard-confirm" @click="handleConfirm">完成</view>

        <view class="keyboard-row" v-for="(row, rowIndex) in currentKeyboardLayout" :key="rowIndex">
            <template v-for="(key, keyIndex) in row" :key="keyIndex">
                <view
                    v-if="key !== 'delete'"
                    class="keyboard-key"
                    @click="handleKeyClick(key)"
                    :class="{ 'disabled-key': disabledKeys.includes(key) }"
                >
                    {{ key }}
                </view>
                <view v-else class="keyboard-key keyboard-delete" @click="handleDelete">删</view>
            </template>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
    keyboardMode: {
        type: String,
        default: 'province'
    }
})

const emit = defineEmits(['keyClick', 'delete', 'confirm'])

const provinceLayout = ref([
    ['黑', '吉', '辽', '蒙', '京', '津', '冀', '晋'],
    ['陕', '甘', '青', '宁', '新', '鲁', '豫', '苏'],
    ['皖', '沪', '鄂', '浙', '渝', '湘', '川', '赣'],
    ['闽', '贵', '云', '粤', '桂', '藏', '琼', 'delete']
])

const numberLayout = ref([
    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
    ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'delete']
])
const disabledKeys = ref(['I', 'O'])

const currentKeyboardLayout = computed(() => {
    return props.keyboardMode === 'province' ? provinceLayout.value : numberLayout.value
})

const handleKeyClick = (key) => {
    if (disabledKeys.value.includes(key)) {
        return
    }
    emit('keyClick', key)
}

const handleDelete = () => {
    emit('delete')
}

const handleConfirm = () => {
    emit('confirm')
}
</script>

<style lang="less">
.license-plate-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750px;
    padding: 0 10px 88px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
    border-radius: 8px;

    .keyboard-confirm {
        align-self: flex-end;
        font-weight: 500;
        margin: 24px 16px;
        padding: 8px 16px;
        background-color: #1d9634;
        color: #fff;
        border-radius: 8px;
    }

    .keyboard-row {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;

        .keyboard-key {
            margin-right: 12px;
            width: 64px;
            height: 74px;
            background-color: #fff;
            box-shadow: 0 1px 1px 0 #666666;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:last-child {
                margin-right: 0;
            }
        }

        .disabled-key {
            color: #dedede;
            background-color: #efefef;
        }

        .keyboard-delete {
            color: #fff;
            background-color: #3d3d3d;
        }
    }
}
</style>
